<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    }

    /* app-1/2 */

    dl {
        width: 400px;
        border: 1px dashed #B8B8B8;
        border-top: 0;
        border-radius: 10px;
    }

    dt {
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
        font-weight: 600;
    }

    .first-dt {
        border-radius: 10px 10px 0 0;
    }

    dd {
        margin-left: 0;
        border-top: 1px dashed #B8B8B8;
        padding: 5px 10px;
    }

    dd label {
        width: 20%;
        height: 20px;
        border-radius: 2px;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 0;
        background-color: #f46;
        color: #fff;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

    dd input {
        display: inline-block;
        vertical-align: middle;
        background: #FAFFBD;
        border: 1px solid #B8B8B8;
        outline: none;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
    }

    dd input:focus {
        border-color: #2188ff;
        box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(3, 102, 214, 0.3);
    }

    dd span {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #D42431;
    }

    code {
        color: #e96900;
        padding: 3px 5px;
        margin: 0 2px;
        border-radius: 2px;
        white-space: nowrap;
    }

    h5 {
        margin: 8px 3px;
    }


    /* app-4 */

    #app-4 div:nth-child(1) {
        width: 400px;
        background: #EAFEF5;
    }

    #app-4 div:nth-child(2) {
        background: #D7FDEE;
    }

    #app-4 div:nth-child(3) {
        background: #DFFAC5;
    }

    #app-4 div {
        border: 1px dashed #B8B8B8;
        border-radius: 10px;
        padding: 20px 5px 5px;
    }
</style>

<div id="app-1">
    <dl>
        <dt class="first-dt">v-model has no response on component </dt>
        <dd>
            <label>do nothing</label>
            <component-1 v-model="text"></component-1>
            <span>{{text}}</span>
        </dd>
        <dd>
            <h5>说明</h5>
            <p>
                在组件上裸用
                <code>v-model</code>，无效。
            </p>
        </dd>
        <dt>Full form of v-model on native input element</dt>
        <dd>
            <label>native</label>
            <input type="text" v-bind:value="text" v-on:input="text = $event.target.value">
            <span>{{text}}</span>
        </dd>
        <dd>
            <h5>说明</h5>
            <p>
                原生标签上
                <code>v-model</code>的完全体
            </p>
        </dd>
    </dl>
</div>

<div id="app-2">
    <dl>
        <dt class="first-dt">bind a handler on input event</dt>
        <dd>
            <label>Abbre</label>
            <component-2-1 v-model="text_1"></component-2-1>
            <span>{{text_1}}</span>
        </dd>
        <dd>
            <label>Full Form</label>
            <component-2-1 v-bind:value="text_1" v-on:input="text_1 = arguments[0]"></component-2-1>
            <span>{{text_1}}</span>
        </dd>
        <dt>assign event object to `v-on` directive</dt>
        <dd>
            <label>Abbre</label>
            <component-2-2 v-model="text_2"></component-2-2>
            <span>{{text_2}}</span>
        </dd>
        <dd>
            <label>Full Form</label>
            <component-2-2 v-bind:value="text_2" v-on:input="text_2 = arguments[0]"></component-2-2>
            <span>{{text_2}}</span>
        </dd>
        <dd>
            <h5>输入组件v-model的完全形式</h5>
            <ol>
                <li>由数据下发和自定义事件实现</li>
                <li>数据下发在其中发挥的作用</li>
                <li>内部
                    <code>input</code>事件绑定方式:事件方法、事件对象</li>
            </ol>
        </dd>
    </dl>
</div>

<div id="app-3">
    <dl>
        <dt> inheritAttrs option </dt>
        <dd><component-3 :foo="foo" :bar="bar"></component-3></dd>
    </dl>
</div>

<div id="app-4">
    <first :first-data="firstData" :second-data="secondData" :third-data="thirdData" :fourth-data="fourthData" @first="firstEvent"
        @second="secondEvent" @third="thirdEvent" @fourth="fourthEvent"></first>
</div>